<template>
  <div>
    <van-nav-bar title="撰写文章" :border="false"
      ><template #left>
        <van-icon
          name="arrow-left"
          size="25"
          @click="onClickLeft"
          color="#81F7D8"
        />
      </template>
      <template #right>
        <van-button
          style="margin-top: 5px"
          color="#81F7D8"
          round
          type="info"
          @click="submit"
          size="small"
          >提交
        </van-button>
      </template>
    </van-nav-bar>
    <div style="padding: 5px 20px">
      <div>
        <label>
          <input
            v-model="articleForm.title"
            class="in-title"
            placeholder="请输入标题"
          />
        </label>

        <!---->
        <quill-editor
          v-model="articleForm.content"
          class="in-content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <!---->

        <div class="footer" @click="show = true">
          + 电影类别（必须选择）
          <van-tag
            round
            style="font-size: 16px; letter-spacing: 1px; margin-left: 10px"
            color="#81f7d8"
            v-if="tag"
            size="large"
            plain
          >
            {{ tag }}
          </van-tag>
        </div>
        <div
          class="poster-btn"
          v-if="submitType === 'article'"
          @click="posterShow = true"
        >
          <van-icon
            size="16"
            name="photo"
          />
          添加图片
        </div>
        <van-popup
          v-model="show"
          round
          position="top"
          :style="{ height: '220px' }"
        >
          <div style="padding: 20px">
            <van-tag
              round
              @click="selectTag(item)"
              v-for="(item, index) in tagList"
              :key="index"
              size="large"
              plain
              color="#81F7D8"
              style="margin-bottom: 10px; margin-right: 10px"
            >
              {{ item }}
            </van-tag>
          </div>
        </van-popup>
      </div>
    </div>

    <van-popup
      v-model="posterShow"
      round
      position="bottom"
      :style="{ height: '200px' }"
    >
      <div style="padding: 20px; text-align: center">
        <div
          style="
            padding-bottom: 30px;
            letter-spacing: 1px;
            color: rgba(0, 0, 0, 0.7);
            font-weight: bold;
          "
        >
          请选择图片
        </div>
        <van-uploader
          :after-read="onRead2"
          :max-count="1"
          v-model="posterFile"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { FindAllType, SaveArticle } from "@/api/article";
import axios from "axios";
import { checkArticleForm } from "@/utils/check";
import { BASE_RUL } from "@/utils/request";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.snow.css";
import Quill from "quill";

var fonts = [
  "Microsoft-YaHei",
  "SimSun",
  "SimHei",
  "KaiTi",
  "Arial",
  "Times-New-Roman",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [
    {
      size: [
        "10px",
        "12px",
        "14px",
        "16px",
        "18px",
        "20px",
        "22px",
        "24px",
        "26px",
        "32px",
        "48px",
      ],
    },
  ], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
];
export default {
  name: "Upload",

  data() {
    return {
      editorOption: {
        placeholder: "请输入正文",
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
        theme: "snow",
      },
      tag: "",
      posterFile: [],
      fileList: [],
      tagList: [],
      show: false,
      posterShow: false,
      submitType: "article",
      articleForm: {
        uid: localStorage.getItem("uid"),
        title: "",
        hasPoster: false,
        type: "",
        poster: "",
        content: "",
        checker: "0",
      },
    };
  },

  mounted() {
    FindAllType().then((res) => {
      if (res.status) this.tagList = res.data.slice(2);
    });
  },

  methods: {
    onEditorBlur(editor) {},
    onEditorFocus(editor) {},
    onEditorChange({ editor, html, text }) {
      console.log(this.articleForm.content);
    },

    submit() {
      this.submitArticle();
    },

    onRead2() {
      let formData = new FormData();
      let file = this.posterFile[0].file;
      formData.append("file", file, file.name);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(BASE_RUL + "/file/image", formData, config).then((res) => {
        if (res.status === 200) {
          this.articleForm.hasPoster = true;
          this.articleForm.poster = res.data;
          this.posterShow = false;
        }
      });
    },

    submitArticle() {
      if (checkArticleForm(this.articleForm)) {
        SaveArticle(this.articleForm).then((res) => {
          if (res.status) {
            this.$toast.success("文章稿件发布成功");
            this.articleForm = {};
            this.posterFile = [];
            let id = res.data.id;
            setTimeout(() => {
              this.$router.push("/article/details/" + id);
            }, 600);
          }
        });
      }
    },

    selectTag(tag) {
      this.tag = tag;
      this.show = false;
      if (this.submitType === "article") this.articleForm.type = tag;
    },

    onClickLeft() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.poster-btn {
  position: absolute;
  color: #81f7d8;
  right: 3vw;
  font-weight: bold;
  padding-top: 8rem;
  text-align: center;
  border-bottom: 0;
  font-weight: bold;
  font-size: 16px;
}

.poster-btn-img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

.in-title {
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 1px;
  width: 97%;
  margin: auto;
  height: 50px;
  border: none;
  font-size: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.in-content {
  width: 97%;
  height: 22rem;
  margin-top: 20px;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  border: none;
  line-height: 25px;
}

.footer {
  position: absolute;
  border-bottom: 0;
  font-weight: bold;
  font-size: 16px;
  color: #81f7d8;
  padding-top: 8rem;
}
</style>